<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>推箱子网页版</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script type="text/javascript" src="js/map.js"></script>
    <script type="text/javascript" src="js/game.js"></script>
    <style type="text/css">
        ol, li {
            margin: 0px;
            padding: 0px
        }
    </style>
    <script type="text/javascript">
        function keydown(e) {
            if (e.keyCode < 37 || e.keyCode > 40) {
                return;
            }
            v.move(e.keyCode);
            // e.keyCode==37 && /*游戏左移*/ 	||
            // e.keyCode==38 && /*游戏上移*/ 		||
            // e.keyCode==39 && /*游戏右移*/ 	||
            // e.keyCode==40 && /*游戏下移*/;
            // 判断当前关结束就进入下一关
        }
    </script>
</head>
<body onkeydown="keydown(event)">
<div id="main" style="padding: 20px;">
    <h1>推箱子网页版</h1>
    <div id="map" style="float: left">
        <div v-for="row in game.map" style="...">
            <img v-for="i in row" :src="'imgs/'+i+'.GIF'">
        </div>
    </div>
    <div id="ctl" style="padding: 20px; float: left; text-align: center;">
        <h2>第1关</h2>
        <span>第0步</span><br>
        <br>
        <input placeholder="尊姓大名" style="width:96px;text-align: center">
        <br>
        <br>
        <button style="width: 100px">重新开始</button>
        <br>
        <br>
        <button style="width: 100px">保 存</button>
        <br>
        <br>
        <button style="width: 100px">加 载</button>
    </div>
    <div id="score" style="padding: 20px; float: left; text-align: center;">
        <h2>排名</h2>
        <ol>
            <li v-for="user in scores[ game.getIndex()]">
                {{user.name}} : {{user.time}} 秒
            </li>

        </ol>
    </div>
</div>
<script>
    var v = new Vue({
        el: "#main",
        data: {
            game: null,
            scores: [],
            time: 0 //通关时间
        },
        //事件钩子函数
        //created 在vue 构建完成之后调用的函数
        //mounted 装载事件
        created() {
            //读取游戏通关数据
            var json = localStorage.getItem("pushbox_scores");
            var scores = JSON.parse(json);
            if (scores) {
                this.scores = scores;
            }
            this.game = new Game();
            this.game.next();
            //记录游戏开始时间
            this.time = new Date();
        },
        methods: {
            move(keyCode) {
                if (keyCode == 37) {
                    this.game.left();
                } else if (keyCode == 38) {
                    this.game.up();
                } else if (keyCode == 39) {
                    this.game.right();
                } else if (keyCode == 40) {
                    this.game.down();
                } else {
                    return;
                }
                //强制刷新
                this.$forceUpdate();
                if (this.game.youWin()) {
                    //延迟100ms让地图刷新
                    setTimeout(() => {
                        alert("厉害！");
                        //关数 =>scores 数组下标值
                        var index = this.game.getIndex();
                        var users = this.scores[index];
                        //判断该关有记录通关用户
                        if (users == undefined) {
                            //创建新的用户数组
                            users = [];
                            this.scores[index] = users;
                        }
                        //用户输入自己的名字
                        var name = prompt("请输入你的名字");
                        //计算通关时间
                        var time = new Date().getTime() - this.time.getTime();
                        //换算成秒
                        time = parseInt(time / 1000);
                        //构建成绩对象
                        var score = {
                            name: name,
                            time: time
                        }
                        //数组添加元素
                        users.push(score);
                        var temp;
                        for(let i=0;i<users.length-1;i++){//冒泡趟数
                            for(let j=0;j<users.length-i-1;j++){
                                if(users[j+1].time<users[j].time){
                                    temp = users[j];
                                    users[j] = users[j+1];
                                    users[j+1] = temp;
                                }
                            }
                        }
                        users.sort()

                        //将 对象转成json字符串
                        var json = JSON.stringify(this.scores);
                        //将成绩保存到localStorage
                        localStorage.setItem("pushbox_scores", json);
                        this.game.next();
                        //记录游戏开始时间
                        this.time = new Date();
                    }, 100)
                }
            }
        }
    })
</script>
</body>
</html>